<template>
  <div class="checkout-page">
    <button class="manage-address" @click="toggleManageAddresses">
      {{ showAddresses ? '隐藏收货地址' : '管理收货地址' }}
    </button>
    <!-- 收货地址部分 -->
    <div class="address-section" v-show="showAddresses">
      <div class="address-header">
        <h1>选择收货地址</h1>
      </div>
      <div class="address-item" v-for="merchant in merchants" :key="merchant.id"
           :class="{ selected: merchant.id === selectedAddressId }" @click="selectAddress(merchant.id)">
        <div class="address-content">
          <!-- 门店图片 -->
          <div class="merchant-photo">
            <img :src="merchant.merchantImage" alt="商户图片">
          </div>
          <br>
          <div class="address-details">
            <!-- 商户名称 -->
            <div class="merchant-name">{{ merchant.merchantName }}</div>
            <!-- 商户地址 -->
            <div class="merchant-address">{{ merchant.merchantAddr }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 订单商品明细部分 -->
    <div class="order-section">
      <div class="order-header">
        <h1>订单明细</h1>
      </div>
      <div class="order-items">
        <el-table :data="order.products" style="width: 100%">
          <el-table-column prop="imgUrl" label="商品图片" width="200"></el-table-column>
          <el-table-column prop="productName" label="商品名称" width="200"></el-table-column>
          <el-table-column prop="price" label="商品单价" width="200"></el-table-column>
          <el-table-column prop="amount" label="数量" width="200"></el-table-column>
          <el-table-column prop="subtotal" label="小计" width="200"></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 订单部分 -->
    <div class="order-section">
      <div class="order-header">
        <h1>确认订单信息</h1>
      </div>
      <div class="order-info-container">
        <div class="order-info-item" v-for="item in orderInfoFields" :key="item.field">
          <div class="order-info-title">{{ item.title }}</div>
          <div class="order-info-content">{{ order[item.field] }}</div>
        </div>
      </div>
    </div>

    <!-- 提交订单按钮 -->
    <button class="submit-order" @click="submitOrder">立即支付</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 选中的收货地址ID
      selectedAddressId: null,
      // 控制收货地址显示和隐藏
      showAddresses: false,
      // 订单总金额
      totalAmount: 0,
      // 是否显示管理地址的模式
      isManagingAddresses: false,
      // 订单编号，实际生成逻辑可能需要根据后端规则
      orderId: 'ORDER' + Date.now(),
      // 用户ID，假设从全局状态或cookie中获取
      userId: localStorage.getItem('userId'),
      // 商户ID，假设每个地址关联一个商户ID
      merchantId: null,
      // 存储商户数据的数组
      merchants: [
        {
          merchantImage: 'http://localhost:10002/410c3e1e-3114-4e01-ae06-d7bcf964dbe6.jpg',
        }
      ],
      selectedAddressId: null, // 选中的地址ID
      isManaging: false, // 是否处于管理收货地址模式
      cartItems: [
      ],
      discount: 91, // 优惠金额
      order:{} // 发请求到后端返回来的订单对象
    };
  },
  computed: {
    // 计算订单总金额，包括优惠金额
    totalAmount() {
      let total = this.cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0);
      return (total - this.discount).toFixed(2);
    },
    orderInfoFields() {
      // 根据order中的数据动态生成要显示的字段
      return [
        { title: '订单编号:', field: 'orderId' },
        { title: '总金额:', field: 'amount' },
        { title: '总数量:', field: 'orderNum' },
        { title: '订单状态:', field: 'conveyTag' },
        { title: '下单时间:', field: 'createTime' },
      ];
    },
  },
  created() {
    this.fetchMerchants();
    this.orderByCreateTime();
  },
  methods: {
    // 发请求拿到最近创建的订单
    async orderByCreateTime(){
      const {data:res} = await this.$http.post(`/buy/order/orderByCreateTime/${2}`);
      this.order = res
      for(let i=0;i<this.order.orderDetails.length;i++){
        this.order.products[i].price = this.order.orderDetails[i].price
        this.order.products[i].amount = this.order.orderDetails[i].amount
        this.order.products[i].subtotal = this.order.orderDetails[i].subtotal
      }
      console.log("order",this.order)
    },
    //获取商户地址表
    async fetchMerchants() {
      try {
        const res = await this.$http.get('/buy/merchant/getAllMerchants');
        if (res && res.data) {
          this.merchants = res.data; // 将后端返回的商户数据赋值给merchants数组
        } else {
          this.$message.error("获取商户列表失败！");
        }
      } catch (error) {
        console.error('Error fetching merchants:', error);
        this.$message.error("获取商户列表时发生错误！");
      }
    },
    // 选择收货地址
    selectAddress(id) {
      this.selectedAddressId = id;
      this.merchantId = this.merchants.find(merchant => merchant.id === id).merchantId;
    },

    // 切换管理收货地址模式
    toggleManageAddresses() {
      this.showAddresses = !this.showAddresses;
    },
    manageAddresses() {
      // 管理地址
    },
    async submitOrder() {
      if (!this.selectedAddressId) {
        alert('请选择收货地址');
        return;
      }
      const {data:res} = await this.$http.post(`/buy/order/updateOrder/${this.order.id}/${this.selectedAddressId}`)
      if(res.length>4){
        this.$message.success(res)
        return this.$router.push("/")
      }
      this.$message.error(res)
      return this.$router.push("/")
    },
    selectAddress(id) {
      this.selectedAddressId = id;
    },
    // deleteAddress(id) {
    //     const index = this.merchants.findIndex(merchant => merchant.id === id);
    //     if (index > -1) {
    //         this.merchants.splice(index, 1);
    //         this.$message.success('地址删除成功！');
    //         this.isManaging = false; // 删除后退出管理模式
    //     }
    // },
  },
};
</script>

<style scoped>
/* 页面整体样式 */
.checkout-page {
  font-family: 'Open Sans', sans-serif;
  background-color: #f8e7e7;
  color: #333;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 标题和按钮样式 */
h2 {
  font-size: 24px;
  font-weight: 300;
  color: #333;
  margin-bottom: 10px;
}

.manage-address {
  padding: 8px 15px;
  /* 按钮内边距 */
  background: linear-gradient(45deg, #f06, #f94);
  /* 渐变背景色 */
  border: none;
  /* 无边框 */
  border-radius: 20px;
  /* 圆角边框 */
  color: white;
  /* 文字颜色 */
  font-weight: bold;
  /* 加粗文字 */
  cursor: pointer;
  /* 鼠标悬停时显示手形图标 */
  transition: all 0.3s ease;
  /* 平滑过渡效果 */
  box-shadow: 0 2px 5px rgba(244, 212, 212, 0.2);
  /* 按钮阴影 */
}

.manage-address:hover {
  box-shadow: 0 4px 8px rgba(244, 182, 182, 0.3);
  /* 鼠标悬停时更深的阴影 */
  transform: translateY(-2px);
  /* 轻微上移 */
}

/* 地址列表样式 */
.address-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  padding: 20px;
}

.address-item {
  border-bottom: 1px solid #eaeaea;
  padding: 10px;
  cursor: pointer;
}

.address-item:last-child {
  border-bottom: none;
}

.address-item:hover,
.address-item.selected {
  background-color: #eef0f5;
}

/* 订单明细和总结样式 */
.order-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-items {
  margin-bottom: 20px;
  font-size: 20px;
}

.order-summary {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #eaeaea;
}
/* 支付按钮样式 */
.submit-order {
  display: block; /* 块级元素，宽度自动填满其父元素 */
  width: 100%; /* 也可以根据需要设置具体宽度 */
  max-width: 300px; /* 最大宽度，超出部分将换行 */
  padding: 15px 20px; /* 内边距 */
  font-size: 18px; /* 字体大小 */
  font-weight: bold; /* 加粗字体 */
  text-align: center; /* 文本居中 */
  text-transform: uppercase; /* 文本大写 */
  color: #ffffff; /* 文字颜色 */
  background-color: #e9573f; /* 背景颜色 */
  border: none; /* 无边框 */
  border-radius: 25px; /* 圆角边框 */
  cursor: pointer; /* 鼠标悬停时显示手形图标 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* 阴影 */
  margin: 20px auto; /* 外边距 */
  text-decoration: none; /* 去除链接下划线，如果按钮是链接的话 */
}

.submit-order:hover {
  background-color: #cb3315; /* 鼠标悬停时的深色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 鼠标悬停时更深的阴影 */
  transform: translateY(-2px); /* 轻微上移 */
}

.submit-order:active {
  background-color: #b22d0f; /* 点击时的颜色 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 点击时阴影减轻 */
  transform: translateY(0); /* 点击时恢复原位 */
}

.submit-order:disabled {
  background-color: #cccccc; /* 禁用状态的颜色 */
  cursor: not-allowed; /* 禁用鼠标点击反馈 */
}

/* 订单信息容器样式 */
.order-info-container {
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* 订单信息项样式 */
.order-info-item {
  flex: 1; /* 每个项占据可用空间 */
  margin: 10px; /* 外边距 */
  padding: 10px; /* 内边距 */
  background-color: #f9f9f9; /* 浅色背景 */
  border-radius: 5px; /* 圆角边框 */
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); /* 轻微的阴影 */
  text-align: center; /* 文本居中 */
}

/* 订单信息标题和内容样式 */
.order-info-title {
  font-size: 18px;
  color: #333;
  margin-bottom: 5px;
}

.order-info-content {
  font-size: 16px;
  color: #666;
}
</style>